﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS属性table-layout的应用</title>
        <style>
            table {
                width: 100%
            }
            .fixed {
                table-layout: fixed
            }
            .automated {
                table-layout: automated
            }
        </style>
    </head>
    <body>
        <h3>CSS属性table-layout的应用</h3>
        <hr />
        <table border="1" class="fixed">
            <caption>
                固定列宽的表格
            </caption>
            <tr>
                <td>年份</td><td>第一季度</td><td>第二季度</td><td>第三季度</td>
            </tr>
            <tr>
                <td>2016</td><td>200</td><td>300</td><td>400000000000000</td>
            </tr>
        </table>
        <br />

        <table border="1" class="automated">
            <caption>
                随内容自动调整列宽的表格
            </caption>
            <tr>
                <td>年份</td><td>第一季度</td><td>第二季度</td><td>第三季度</td>
            </tr>
            <tr>
                <td>2016</td><td>200</td><td>300</td><td>400000000000000</td>
            </tr>
        </table>
    </body>
</html>
